import React from 'react';
import withHook from '../component/widthhook'
import {Message} from 'element-react'
import './backNav.scss'
class BackNav extends React.Component{
    constructor(props){
        super(props)
        this.state={
            arr:[
                {title:'请先登录',id:1},
                {title:'免费注册',id:2},
                {title:'我的订单',id:3},
                {title:'会员中心',id:4},
                {title:'帮助中心',id:5},
                {title:'关于我们',id:6}, 
            ],
            user:[]
        }
    }   
    navClick(i,t){
        // console.log(i);
        if(i.id===1&&i.title==='请先登录'){
            this.props.to('/login')
        }
        if(i.id===2&&i.title==='退出登录'){
            Message({
                message: '退出登录成功',
                type: 'success'
              });
            localStorage.setItem('token',null)
            this.props.to('/login')
        }
        if(i.id===2&&i.title==='免费注册'){
            this.props.to('/register')
        }
    }
    componentWillMount(){
        const {arr} =this.state
       var user= JSON.parse(localStorage.getItem('token'))
       this.setState({
           user:user
       })
       if(user&&user.account!==''){
            arr[0].title=user.account
            arr[1].title='退出登录'
            this.setState({
                arr:arr
            })
       }
    }
    render(){
        const {arr} =this.state
        return(
            <div className='backnav'>
                <div className="nav">
                    <ul>
                        {
                            arr&&arr.map((item,index)=>{
                                return(
                                    <li key={index} onClick={this.navClick.bind(this,item)}><span >{item.title}</span></li>
                                )
                            })
                        }
                        <li><span >
                        <svg t="1666081744087" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2598" width="200" height="200"><path d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z" p-id="2599" fill="#cdcdcd"></path></svg>
                        手机版</span></li>
                    </ul>
                </div>
            </div>
        )
    }
}

const QilinCompont= withHook(BackNav )
export default QilinCompont